turbo.json (1)

4-4: 모킹 온/오프를 위한 환경변수 추가 고려

프리뷰/테스트 환경에서 MSW 모킹을 토글하려면 전용 플래그를 두는 편이 운용에 유리합니다. 예: NEXT_PUBLIC_API_MOCKING. 필요 시 아래처럼 globalEnv에 포함해 주세요.

-  "globalEnv": ["NODE_ENV","NEXT_PUBLIC_API_URL"],
+  "globalEnv": ["NODE_ENV", "NEXT_PUBLIC_API_URL", "NEXT_PUBLIC_API_MOCKING"],

.gitignore (1)

27-31: .env.example 템플릿 추가 권장

공유 가능한 기본값 템플릿(.env.example)을 커밋해 온보딩과 CI 설정을 명확히 하면 좋습니다. 필요하시면 템플릿 초안까지 만들어드릴게요.

apps/web/app/_constants/path.ts (1)

1-3: 리터럴 보존을 위해 as const 추가 권장

경로 상수의 리터럴 특성을 유지하면 오타/변경을 컴파일 타임에 더 잘 포착할 수 있습니다.

 export const API_PATH = {
   CATEGORY: '/categories',
-}
+} as const

추가로, 여러 키가 늘어날 예정이면 satisfies Record<string, \/${string}`>` 제약으로 슬래시 시작을 강제하는 것도 방법입니다.

apps/web/app/_mocks/data/category.ts (2)

1-17: 타입 안전성 강화를 위한 리터럴 고정(as const) 제안

데이터를 리터럴로 고정해 의도치 않은 변형을 방지하고, 추론된 유니온 타입을 활용할 수 있습니다.

-export const category = [
+export const category = [
   { id: 1, name: '치킨', iconKey: 'chicken' },
   { id: 2, name: '햄버거', iconKey: 'burger' },
   { id: 3, name: '한식', iconKey: 'korean' },
   { id: 4, name: '분식', iconKey: 'bunsik' },
   { id: 5, name: '중식', iconKey: 'chinese' },
   { id: 6, name: '양식', iconKey: 'western' },
   { id: 7, name: '샐러드', iconKey: 'salad' },
   { id: 8, name: '일식', iconKey: 'japanese' },
   { id: 9, name: '카페', iconKey: 'cafe' },
   { id: 10, name: '피자', iconKey: 'pizza' },
   { id: 11, name: '멕시칸', iconKey: 'mexican' },
   { id: 12, name: '아시안', iconKey: 'asian' },
   { id: 13, name: '찜·탕', iconKey: 'soup' },
   { id: 14, name: '고기·구이', iconKey: 'meat' },
   { id: 15, name: '도시락', iconKey: 'lunchbox' },
-]
+] as const

---

1-17: 파생 타입 공개로 재사용성 개선 (선택)

소비측 컴포넌트/핸들러에서 타입을 재활용할 수 있도록 파생 타입을 노출하면 편리합니다.

// 파일 하단 등에서 추가
export type Category = typeof category[number];
export type CategoryIconKey = Category['iconKey'];

apps/web/app/_lib/axiosInstance.ts (1)

5-5: withCredentials 전역 활성화는 CORS/3rd-party 쿠키 이슈를 유발할 수 있음

전역으로 true 설정 시, 크로스 오리진 요청에 예기치 않은 쿠키 전송/차단이 발생할 수 있습니다. 환경변수로 토글하거나, 민감한 요청에서만 opt-in하는 방식을 권장합니다.

예: withCredentials: process.env.NEXT_PUBLIC_WITH_CREDENTIALS === 'true'

apps/web/package.json (1)

9-17: MSW 워커 파일 재생성 스크립트 추가 권장

MSW 버전 업데이트 시 mockServiceWorker.js를 재생성하지 않으면 미묘한 불일치가 발생합니다. 스크립트를 추가해 유지보수성을 높이세요.

적용 제안 diff:

   "scripts": {
     "dev": "next dev --port 3000 --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "next lint --max-warnings 0",
     "check-types": "tsc --noEmit",
     "test": "vitest run",
-    "test:watch": "vitest --watch"
+    "test:watch": "vitest --watch",
+    "msw:init": "msw init ./public --save"
   },

원하시면 postinstall 훅으로 자동 실행도 가능합니다: "postinstall": "npm run msw:init".

apps/web/app/HydrationBoundaryPage.tsx (4)

1-5: QueryKey 타입을 명시해 쿼리 키 유연성 확보

queryKey에 숫자/객체 등이 포함되는 패턴을 지원하려면 string[] 대신 QueryKey를 사용하세요.

적용 제안 diff:

-import {
-  dehydrate,
-  HydrationBoundary,
-  QueryClient,
-} from '@tanstack/react-query'
+import {
+  dehydrate,
+  HydrationBoundary,
+  QueryClient,
+  type QueryKey,
+} from '@tanstack/react-query'

---

14-17: QueryConfig의 queryKey 타입을 QueryKey로 교체

React Query의 표준 키 타입으로 변경하여 타입 호환성을 개선합니다.

적용 제안 diff:

 type QueryConfig = {
-  queryKey: string[]
+  queryKey: QueryKey
   queryFn: () => Promise<unknown>
 }

---

45-45: QueryClient 옵션을 Provider와 일치시켜 SSR/CSR 캐싱 일관성 확보

QueryClientProvider.tsx에서 staleTime을 60초로 설정하고 있습니다. 여기서도 동일하게 맞추는 것이 안전합니다.

적용 제안 diff:

-  const queryClient = new QueryClient()
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+      },
+    },
+  })

---

47-51: Promise.all → allSettled로 변경해 개별 쿼리 실패 시 페이지 전체 실패 방지

prefetch 중 하나라도 실패하면 현재는 전체가 reject됩니다. allSettled로 전환하면 실패한 쿼리는 클라이언트에서 재시도 가능하고 페이지는 정상 하이드레이션됩니다.

적용 제안 diff:

-  await Promise.all(
-    queries.map(({ queryKey, queryFn }) =>
-      queryClient.prefetchQuery({ queryKey, queryFn }),
-    ),
-  )
+  await Promise.allSettled(
+    queries.map(({ queryKey, queryFn }) =>
+      queryClient.prefetchQuery({ queryKey, queryFn }),
+    ),
+  )

apps/web/app/_mocks/handlers/index.ts (1)

3-3: handlers에 명시적 타입을 부여해 안정성 향상

타입을 명시하면 핸들러 추가/리팩토링 시 오류를 조기에 포착할 수 있습니다.

다음처럼 수정 제안드립니다:

-import { CategoryHandlers } from '@/_mocks/handlers/categoryHandlers'
+import type { HttpHandler } from 'msw'
+import { CategoryHandlers } from '@/_mocks/handlers/categoryHandlers'

-export const handlers = [...CategoryHandlers]
+export const handlers: HttpHandler[] = [...CategoryHandlers]

apps/web/app/_mocks/handlers/categoryHandlers.ts (3)

11-15: 상대 경로 매칭으로 단순화 가능

절대 URL 대신 상대 경로로 정의하면 환경변수 없이도 클라이언트/서버 어디서든 안정적으로 매칭됩니다.

-export const CategoryHandlers = [
-  http.get(addBaseUrl(API_PATH.CATEGORY), () => {
-    return HttpResponse.json(category)
-  }),
-]
+export const CategoryHandlers = [
+  http.get(API_PATH.CATEGORY, () => {
+    return HttpResponse.json(category)
+  }),
+]

---

1-1: 타입 명시로 핸들러 배열 안전성 강화

HttpHandler[] 타입을 명시하면 핸들러 형태가 틀어질 때 컴파일 단계에서 잡을 수 있습니다.

-import { http, HttpResponse } from 'msw'
+import type { HttpHandler } from 'msw'
+import { http, HttpResponse } from 'msw'
@@
-export const CategoryHandlers = [
+export const CategoryHandlers: HttpHandler[] = [

---

2-2: 경로 별칭 사용 일관성 제안

이 파일만 상대 경로('../data/category')를 사용하고, 다른 파일은 '@' 별칭을 사용합니다. 팀 컨벤션에 맞춰 통일하면 가독성이 좋아집니다.

-import { category } from '../data/category'
+import { category } from '@/_mocks/data/category'

apps/web/app/layout.tsx (2)

29-29: 전역 suppressHydrationWarning 사용 축소 권장

MSWProvider 수정으로 프로덕션 하이드레이션 미스매치가 해소되므로 전역 억제 플래그는 불필요해집니다. 필요 시 특정 노드 범위로 최소화하세요.

-    <html lang='ko' suppressHydrationWarning={true}>
+    <html lang='ko'>

---

21-21: async 함수 시그니처는 필요 시에만

initServerMSW를 await하지 않는다면 RootLayout을 async로 만들 이유가 없습니다. 위 제안처럼 await를 도입하지 않을 계획이라면 sync로 되돌리는 것이 낫습니다.

-export default async function RootLayout({
+export default function RootLayout({

apps/web/app/_mocks/initMSW.ts (2)

13-21: 브라우저 워커 시작을 idempotent하게 만들고 예외 처리 추가 제안

개발 모드에서 컴포넌트 마운트/언마운트가 중복 발생할 수 있어 worker.start()의 중복 호출을 방지하는 가드가 있으면 안전합니다. 초기화 실패 시를 대비한 예외 처리도 함께 제안합니다. 또한 반환 타입을 명시해 서버측 함수와 API 일관성을 맞추면 좋습니다.

-export const initBrowserMSW = async () => {
+export const initBrowserMSW = async (): Promise<void> => {
   if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
-    const { worker } = await import('./worker')
-    await worker.start({
-      onUnhandledRequest: 'bypass',
-    })
-    console.log('✅ MSW 브라우저 시작됨')
+    try {
+      if ((window as any).__MSW_WORKER_STARTED) return
+      const { worker } = await import('./worker')
+      await worker.start({
+        onUnhandledRequest: 'bypass',
+      })
+      ;(window as any).__MSW_WORKER_STARTED = true
+      console.log('✅ MSW 브라우저 시작됨')
+    } catch (err) {
+      console.error('❌ MSW 브라우저 시작 실패:', err)
+    }
   }
 }

추가로 basePath를 사용하는 경우, worker.start({ serviceWorker: { url: '<basePath>/mockServiceWorker.js' }}) 옵션이 필요할 수 있습니다. 필요 시 알려주시면 해당 조건부 설정까지 반영된 패치를 제안드리겠습니다.

---

17-17: 개발 단계에서 mock 누락을 빠르게 감지하려면 warn 모드 고려

현재 브라우저는 onUnhandledRequest: 'bypass'로 설정되어 있어 미모킹 요청이 조용히 통과합니다. 초기 통합 단계에서는 'warn'로 두어 누락된 핸들러를 빠르게 잡는 것이 디버깅에 유리합니다. 안정화 이후 다시 'bypass'로 되돌릴 수 있습니다.

-      onUnhandledRequest: 'bypass',
+      onUnhandledRequest: 'warn',

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

apps/web/app/layout.tsx (1)

26-26: await 무의미: initServerMSW가 내부 비동기(import.then) 완료를 기다리지 않음

현재 initServerMSW는 import().then(...) 패턴이라 함수가 즉시 종료되고, 그 사이 SSR fetch가 먼저 실행되면 몇 건이 실제 네트워크로 나갈 수 있습니다. RootLayout에서 await를 사용하더라도 효과가 없습니다. 서버 초기화 함수가 동기적으로 인터셉터를 설치한 후 반환되도록 변경하세요(동일 이슈가 과거 리뷰에서 이미 지적됨).

initMSW.ts 개선 제안:

// apps/web/app/_mocks/initMSW.ts
declare global {
  // eslint-disable-next-line no-var
  var __MSW_SERVER_STARTED__: boolean | undefined
}

export const initServerMSW = async () => {
  // 서버 사이드 + 개발 환경에서만 동작
  if (typeof window !== 'undefined' || process.env.NODE_ENV !== 'development') return

  if (globalThis.__MSW_SERVER_STARTED__) return

  // import 완료를 기다린 뒤 listen을 즉시 수행(동기 설치)
  const { server } = await import('./server')
  server.listen({ onUnhandledRequest: 'warn' })
  globalThis.__MSW_SERVER_STARTED__ = true
  console.log('✅ MSW 서버 시작됨')
}

apps/web/app/_mocks/MSWProvider.tsx (3)

10-17: MSW 초기화 실패 시 무한 빈 화면 가능 — try/catch 및 cleanup 추가 제안

initBrowserMSW()가 실패하면 setMSWReady(true)가 호출되지 않아 개발 환경에서 화면이 영구히 null로 유지될 수 있습니다. 또한 HMR/언마운트 타이밍에 setState 호출 경고를 피하기 위한 cleanup도 권장합니다.

아래처럼 예외를 삼키고 계속 렌더하도록 보완해 주세요.

   useEffect(() => {
-    if (!isDev || mswReady) return
-    const init = async () => {
-      await initBrowserMSW()
-      setMSWReady(true)
-    }
-    init()
+    if (!isDev || mswReady) return
+    let cancelled = false
+    const init = async () => {
+      try {
+        await initBrowserMSW()
+      } catch (e) {
+        console.warn('MSW 초기화 실패, 앱을 계속 렌더링합니다.', e)
+      } finally {
+        if (!cancelled) setMSWReady(true)
+      }
+    }
+    init()
+    return () => {
+      cancelled = true
+    }
   }, [isDev, mswReady])

---

4-4: React StrictMode 중복 start 방지 가드 권장(개발 편의성)

개발 모드 StrictMode에서 effect가 두 번 호출되어 worker.start가 중복 호출될 수 있습니다. initBrowserMSW 내부에 전역 가드를 둬서 안전하게 1회만 시작하도록 보완하는 것을 권장합니다.

apps/web/app/_mocks/initMSW.ts 제안:

// initMSW.ts
declare global {
  // eslint-disable-next-line no-var
  var __MSW_BROWSER_STARTED__: boolean | undefined
}

export const initBrowserMSW = async () => {
  if (
    typeof window === 'undefined' ||
    process.env.NODE_ENV !== 'development' ||
    globalThis.__MSW_BROWSER_STARTED__
  ) {
    return
  }
  const { worker } = await import('./worker')
  await worker.start({ onUnhandledRequest: 'bypass' })
  globalThis.__MSW_BROWSER_STARTED__ = true
  console.log('✅ MSW 브라우저 시작됨')
}

---

6-6: 개발 중 빈 화면 대신 fallback 제공 옵션 제안

개발 환경에서 초기 한 틱 동안 null을 렌더링하는 대신, 선택적으로 스켈레톤/로딩 UI를 전달할 수 있도록 fallback prop 지원을 제안합니다.

-export function MSWProvider({ children }: { children: React.ReactNode }) {
+export function MSWProvider({
+  children,
+  fallback,
+}: {
+  children: React.ReactNode
+  fallback?: React.ReactNode
+}) {
@@
-  if (!mswReady) return null
+  if (!mswReady) return <>{fallback ?? null}</>

Also applies to: 19-21

apps/web/app/layout.tsx (1)

29-29: suppressHydrationWarning는 개발 환경에서만 사용하는 것을 권장

현재 전역으로 억제하면 프로덕션에서 실제 하이드레이션 문제를 가릴 수 있습니다. dev에서만 켜는 형태가 안전합니다.

-export default async function RootLayout({
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
   await initServerMSW()
 
-  return (
-    <html lang='ko' suppressHydrationWarning={true}>
+  const suppress = process.env.NODE_ENV === 'development'
+  return (
+    <html lang='ko' suppressHydrationWarning={suppress}>

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro